vue 第一天总结


<!-- 插值表达式 -->
1.{{输出的属性名}}
2.{{ obj.age >= 18 ? "成年" : "未成年" }}

<!-- vue绑定属性 -->
1.v-bind:href="绑定的属性"
2.:href="绑定的属性"
例: <img :src="src" alt="" />

<!-- vue事件 -->
@事件="事件执行函数" 或 v-on:事件="事件执行函数"
例: <button @click="fn3">数组去重</button>

<!-- vue创建标签内容 -->
v-text 和 v-html
v-text="创建内容绑定的属性" 不会识别标签
v-html="创建内容绑定的属性" 会识别标签并添加到html中
例:
<p v-text="属性名"></p>
<p v-html="属性名"></p>

<!-- vue显示隐藏 -->
v-show 和 v-if 以条件是否为true来判定显示隐藏
v-show 操作display属性,设置true和false来设置隐藏显示
v-if 并非显示和隐藏,而是创建和删除,最好少用,对于浏览器性能会有影响
例:
<p v-show="control">这里是 v-show</p>
<p v-if="control">这里是 v-if</p>

<!-- vue循环 -->
v-for 循环生成本标签
<li v-for="(items, index) in array" :key="index">
    <span>索引:{{ index }}</span>
    <span>内容:{{ items }}</span>
</li>





<!-- 双向绑定 -->
v-model 将所在标签的变化实时传递改变代码,并根据改变后的代码更改变化的页面元素
多选中可以以此实现,全选,获取数据
<!-- 获取数据 -->
v-model="定义的数组名"
<!-- 全选 -->
v-model="定义的布尔类型属性名"
<!-- 单选 -->
v-model="定义的选中元素属性名"
<!-- 下拉 -->
v-model="默认选中的下拉元素的属性"


<!-- 获取事件对象 -->
调用函数中,既要传递参数,又要获取事件对象 $even
<button @click="fn3(88, $event)">baidu</button>


<!-- 键盘事件 -->
可以选定那个键的事件,如果不指定,默认所有键都可以触发
@keyup="函数名"
@keydown="函数名"
@keyup.enter="函数名"
@keydown.esc="函数名"










开启vue服务器,yarn serve

初始化 APP文件
<template>
    <div id="app">
        对应的html结构
    </div>
</template>
<script>
    export default {
        data() {
            return {
                对应的属性变量
            };
        },

        methods: {
            对应的方法
        },
    };
</script>
// css样式
<style scoped>
    #app {
        对应的css样式
    }
</style>










<!-- 功能命令 -->
<template>
    <div id="app">
        <h1>1-插值表达式</h1>
        <p>直接显示：{{ msg }}</p>
        <p>对象属性：{{ obj.name }}</p>
        <!-- vue语法：{{ 提高 区分数据类型}} -->
        <p>三元表达式：{{ obj.age >= 18 ? "YES" : "NO" }}</p>



        <h1>2-v-bind：给标签绑定属性</h1>
        <a v-bind:href="href">跳转1</a>
        <a :href="href" :aaa="src">跳转2</a>
        <img :src="src" alt="" />



        <h1>3-v-on：@ 基本使用 注册事件</h1>
        <button v-on:click="numb = 20">按钮1</button>
        <button v-on:click="fn">按钮2</button>
        <button v-on:click="fn1(20)">按钮3</button>
        <button @click="fn1(30)">按钮4</button>


        <h1>4-v-on：获取事件对象</h1>
        <a @click="fn2" href="http://www.baidu.com">baidu</a>
        <!-- 既要传入实参，又要获取事件对象 $event -->
        <button @click="fn3(88, $event)">baidu</button>



        <h1>5-v-on：修饰符</h1>
        <!-- 事件执行函数：可以被多个标签绑定 -->
        <a @click.prevent="fn4" href="http://www.baidu.com">阻止默认</a>
        <button @click.stop="fn4">阻止冒泡</button>
        <input type="text" @keydown.enter="fn4" />



        <h1>6-v-on：执行函数内部：this</h1>
        <span>{{ numb }}</span>
        <button @click="fn5">btn-this</button>



        <h2>反转字案例：</h2>
        <p>{{ msg }}</p>
        <button @click="fn6">反转</button>



        <h1>【7-v-model：最能体现数据双向绑定！！】</h1>
        <p>
            输入框和文本域：
            <input type="text" v-model="iptstr" /><br />
            {{ iptstr }}<br />
            <textarea v-model="iptstr"></textarea>
        </p>
        <p>
            <!-- 密码：<input type="password" v-model="pwd"> -->
            {{ pwd }}
        </p>
        <p>
            下拉选择：
            <select v-model="sel">
                <option value="北京市">北京</option>
                <option value="南京市">南京</option>
                <option value="天津市">天津</option>
            </select>
        </p>
        <p>
            多选框1：看变量
            初始化为数组，点击多选框的时候，变量把选中value值添加到数组
            <br />
            <!-- v-model重要：-->
            <input type="checkbox" v-model="arr" value="抽烟" />抽烟
            <input type="checkbox" v-model="arr" value="喝酒" />喝酒
            <input type="checkbox" v-model="arr" value="写代码" />写代码
        </p>
        <p>
            多选框2：看变量 初始化为boolean，整体是否选中
            <br />
            <!-- v-model重要：-->
            <input type="checkbox" v-model="key" value="抽烟" />抽烟
            <input type="checkbox" v-model="key" value="喝酒" />喝酒
            <input type="checkbox" v-model="key" value="写代码" />写代码
        </p>

        <p>
            单选：
            <br />
            <input type="radio" value="男" name="sex" v-model="gender" />男
            <input type="radio" value="女" name="sex" v-model="gender" />女
        </p>
        <button @click="fn7">submit</button>


        <h1>7-v-model：修饰符</h1>
        <!-- <input type="text" v-model="a">+<input type="text" v-model="b">={{a*1+b*1}} -->
        <br />
        <input type="text" v-model.number="a" />+<input type="text" v-model.number="b" />={{ a + b }}

        <br />
        <input type="text" v-model.trim="name" />{{ name }}
        <br />
        <!-- lazy:懒 -->
        <!--   input  change  input事件 -->
        <input type="text" v-model.lazy="aaa" />{{ aaa }}




        <h1>8-v-text v-html</h1>
        <p v-text="spanstr"></p>
        <p v-html="spanstr"></p>



        <h1>9-v-show v-if</h1>
        <button @click="control = !control">{{ control ? "收起" : "展开" }}</button>
        <p v-show="control">我是一个p标签，我被show控制了！</p>
        <p v-show="control">我是一个p标签，我被show控制了！</p>
        <p v-show="control">我是一个p标签，我被show控制了！</p>
        <p v-show="control">我是一个p标签，我被show控制了！</p>
        <!-- <p v-if="control">我是一个p标签，我被if控制了！</p> -->

        <!-- 频繁通过控制变量：让某个标签显示或隐藏  使用v-show -->
        <h1>10-v-for</h1>
        <ul>
            <!-- 技巧：让谁循环，就把v-for在哪个标签上就OK -->
            <li v-for="(item, index) in array" :key="index">
                {{ index }} ------> {{ item }}
            </li>
        </ul>
        <ul>
            <!-- 技巧：让谁循环，就把v-for在哪个标签上就OK : (随便起) -->
            <li v-for="(val, key) in some" :key="key">{{ key }} ------> {{ val }}</li>
        </ul>

        <ul>
            <li v-for="(item, index) in stuArr" :key="index">
                {{ item.name }} {{ item.sex }} {{ item.hobby }}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        //  1.初始化数据  固定语法
        data() {
            return {
                // 初始化数据
                msg: "133-day02-vue",
                obj: {
                    name: "zs",
                    age: 18,
                },
                href: "http://itcast.cn",
                src: "https://img2.baidu.com/it/u=3960470193,627689163&fm=26&fmt=auto&gp=0.jpg",
                numb: 10,
                iptstr: "我是输入框的一个数据",
                pwd: "000000",
                sel: "天津市",
                arr: ["写代码"],
                key: true,
                gender: "男",
                spanstr: "<span>我是HTML结构的字符串</span>",
                a: 0,
                b: 0,
                name: "zs",
                aaa: "----",
                control: true,
                array: [10, 20, 30, 40],
                some: {
                    a: "我是a属性的值",
                    b: "我是b属性的值",
                    c: "我是c属性的值",
                    e: "我是e属性的值",
                },
                stuArr: [
                    {
                        id: 1001,
                        name: "孙悟空",
                        sex: "男",
                        hobby: "吃桃子",
                    },
                    {
                        id: 1002,
                        name: "猪八戒",
                        sex: "男",
                        hobby: "背媳妇",
                    },
                ],
            };
        },

        //  2.页面执行函数
        methods: {
            fn() {
                console.log(1);
            },
            fn1(a) {
                console.log(a);
            },
            fn2(e) {
                // e属性 和方法；
                // e.preventDefault();
                // 阻止冒泡：当父子结构都注册同样的事件，触发子元素，会把父级的函数也会执行！
                // e.stopPropagation();
            },
            //
            fn3(numb, e) {
                console.log(numb, e);
            },
            fn4() {
                console.log(1);
            },
            fn5() {
                // console.log(this.numb);
                this.numb++;
                this.obj.name = "***********************************";
            },
            fn6() {
                // 1  干啥？操作某个数据  this.msg
                // 2. 学我学过反转 是数组的方法
                // 3. 现在 字符串
                let arr = this.msg.split("");
                arr = arr.reverse();
                this.msg = arr.join("");
            },
            fn7() {
                // 如何拿数据？
            },
        },
    };
</script>

<style scoped>
    #app {}
</style>